<template>
  <el-card style="max-width: 100%" shadow="hover">
    <template #header>
      <div>
        <span>折线统计</span>
      </div>
    </template>
    <div ref="echartsRef" style="width: 100%; height: 400px"></div>
  </el-card>
</template>
<script setup lang="ts">
  import { settingStore } from '@/stores/modules/setting'
  import { onMounted, ref, computed, watch } from 'vue'
  import * as echarts from 'echarts'

  const echartsRef = ref(null)
  const theme = computed(() => settingStore().getTheme)
  watch(theme, (newVal) => {
    initChart(newVal)
  })
  function initChart(theme: string = 'light') {
    if (echartsRef.value == null) {
      return
    }
    echarts.dispose(echartsRef.value)
    const chart = echarts.init(echartsRef.value, theme)
    const option = {
      title: {},
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      legend: {
        data: ['访问量', '下载量', '会员数', '插件数'],
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: ['06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00'],
        },
      ],
      yAxis: [
        {
          type: 'value',
        },
      ],
      series: [
        {
          name: '访问量',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series',
          },
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: '下载量',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series',
          },
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: '会员数',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series',
          },
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: '插件数',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series',
          },
          data: [100, 200, 100, 150, 120, 80, 200],
        },
      ],
    }
    chart.setOption(option)
  }
  onMounted(() => {
    initChart(theme.value)
  })
</script>

<style scoped lang="scss"></style>
